<template>
	<view class="invoicing">
		<u-form
			labelPosition="left"
			:model="formData"
			ref="form"
			labelWidth="140rpx"
		>
			<view class="group">
				<u-form-item label="订单编号">
					41421412312487
				</u-form-item>
				<u-form-item label="开票金额">
					<price :value="10" color="#f00"></price>
				</u-form-item>
			</view>
			
			<view class="group">
				<view class="label-right">
					<u-form-item label="发票类型">
						电子发票
					</u-form-item>
				</view>
				<view class="label-block">
					<u-form-item label="发票抬头" prop="invoiceHeader">
						<view @click="showInvoiceHeaderPicker = true" class="flex-between">
							<u-text :text="formData.invoiceHeader" v-if="formData.invoiceHeader" color="#303133"></u-text>
							<u-text text="请选择发票类型" v-else color="#c0c4cc"></u-text>
							<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
						</view>
						<u-picker
							:show="showInvoiceHeaderPicker"
							:columns="invoiceHeaderColumns" 
							@confirm="confirmInvoiceHeader"
							@cancel="showInvoiceHeaderPicker = false"
						/>
					</u-form-item>
				</view>
				<view class="label-right">
					<u-form-item label="设置为默认抬头" labelWidth="220rpx">
						<u-checkbox-group v-model="checked">
							<u-checkbox shape="circle" :name="formData.id"></u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
			</view>
			
			<view class="group">
				<u-form-item prop="remark">
					<u-textarea v-model="formData.remark" placeholder="发票备注(选填)" border="none" />
				</u-form-item>
			</view>
			
			<view class="group">
				<u-form-item label="电子邮箱" prop="email">
					<u-input v-model="formData.email" placeholder="请输入电子邮箱" border="none" clearable />
				</u-form-item>
				<u-form-item label="发送时间">
					预计2021-12-15 12:28:32前发送
				</u-form-item>
			</view>
		</u-form>
		
		<view class="bottom-add-btn">
			<u-button text="提交申请" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {},
			showInvoiceHeaderPicker: false,
			invoiceHeaderColumns: [['绍兴奥体']],
		}
	},
	methods: {
		add() {
			uni.navigateBack();
		},
		confirmInvoiceHeader({ value }) {
			this.formData.invoiceHeader = value[0];
			this.showInvoiceHeaderPicker = false;
		},
	}
}
</script>

<style lang="scss" scoped>
.invoicing {
	min-height: 100vh;
	background-color: #f7f7f7;
	padding: 30rpx;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	.group {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;
		
		& + .group {
			margin-top: 30rpx;
		}
	}
	
	/deep/.u-form {
		&-item__body__left__content__label {
			color: #333;
		}
		
		.label-right {
			.u-form-item__body {
				justify-content: space-between;
			}
			
			.u-form-item__body__right {
				flex: 0 0 auto;
			}
		}
		
		.label-block {
			.u-form-item__body {
				display: block;
			}
			
			.u-form-item__body__right {
				margin-top: 20rpx;
			}
		}
	}
}
</style>
